<template>
	<view class="container">
		<view class="line"></view>
		<view class="service">
			<view class="service-title">自助服务</view>
			<view class="menus">
				<image class="menu" :src="helpOl" @click="handleClickItem"></image>
				<image class="menu" :src="helpTel" @click="handleClickItem"></image>
			</view>
		</view> 
		<view class="line"></view>
		<block  v-for="(item,index) in list" :key="index">
		<view class="list">
			<view class="title">{{item.key}}</view>
			<u-cell-group :border="false">
				<u-cell-item v-for="(v,index) in item.value" :key="index" :title="v.title" @click="handleClickItem(v)"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="line"></view>
		</block>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				helpTel: this.$mAssetsPath.helpTel,
				helpOl: this.$mAssetsPath.helpOl,
				helpRight: this.$mAssetsPath.helpRight
			}
		},
		onLoad(){
			this.findList();
		},
		methods: {
			async findList(){
				let result = await this.$apis.extraAbout();
				this.list = result.data;
			},
			handleClickItem(item) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.helpDetail,
					query:{
						row:encodeURIComponent(JSON.stringify(item))
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 180upx;

		.list {
			padding: 30upx 40upx 0 40upx;

			.title {
				font-size: 36upx;
				color: #0E1E36;
				font-weight: bold;
			}

			.u-cell {
				padding-left: 0;
				padding-right: 0;
			}
		}

		.service {
			padding: 30upx 40upx;

			.service-title {
				color: #0E1E36;
				font-size: 36upx;
				font-weight: bold;
			}

			.menus {
				margin-top: 28upx;
				display: flex;
				justify-content: space-between;

				.menu {
					width: 312upx;
					height: 332upx;
				}
			}
		}

		.line {
			width: 100%;
			height: 20upx;
			background-color: #F5F5F9;
		}
	}
</style>
